import { createTheme, CssBaseline, responsiveFontSizes, ThemeProvider } from "@mui/material"
import { functionCommon } from "@ruler3d/common"
import { useOrientation } from "@ruler3d/usehook"
import React, { useEffect } from "react"
import { getLocale, IRouteComponentProps } from "umi"

const theme = createTheme({
  typography: { fontSize: functionCommon.browser().mobile ? 10 : 14 },
  palette: {
    mode: "dark",
    primary: {
      main: "#1975FA"
    },
    secondary: {
      main: "#f44336"
    },
    error: {
      main: "#822D45"
    },
    background: {
      paper: "#161722",
      default: "#060716"
    }
  },
  spacing: 5,
  components: {
    MuiTooltip: {
      styleOverrides: {
        tooltip: {
          maxWidth: "none",
          backgroundColor: "transparent",
          padding: 0
        },
        arrow: {
          color: "rgba(0,0,0,.9)"
        }
      }
    }
  },
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 1050,
      lg: 1200,
      xl: 1536
    }
  }
})

const ProjectEntry: React.FC<IRouteComponentProps> = props => {
  useEffect(() => {
    document.getElementById("app").classList.add(getLocale())
  }, [])

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline>{props.children}</CssBaseline>
    </ThemeProvider>
  )
}
export default ProjectEntry
